<template>
    <a-popover title="">
        <template #content>
            <div class="listWrapper">
                <a-button
                    type="primary" ghost
                    v-for="(item, index) in options"
                    :key="index"
                    class="itemWrapper"
                    style="padding: 0 5px"
                    @click="handleItemClick(item)"
                >
                    {{ item.label }}
                </a-button>
            </div>
        </template>
        <a-button style="margin-left: 10px;" type="primary">数值</a-button>
    </a-popover>
</template>

<script setup>
import { ref, watch } from "vue";
import DigitalFn from "./digital-fn.js";

const options = ref([
    { value: "cardinal", label: "读数值" },
    { value: "characters", label: "读数字" },
    { value: "telephone", label: "读手机号" },
]);

const fn = ref();
const onOpen = (editor) => {
    if (!fn.value && editor) {
        // console.log("onOpen");
        fn.value = new DigitalFn(editor);
    }
};

function handleClick() {
    if (!fn.value.isDisabled()) {
        return;
    }
    // 显示列表 省略
}

function handleItemClick(item) {
    if (fn.value.isDisabled()) {
        return;
    }
    fn.value?.exec({ ...item });
}

const props = defineProps({
    editor: {
        type: Object,
        default: null,
    },
});

watch(
    () => props.editor,
    (val) => {
        // console.log("props.editor", props.editor)
        onOpen(props.editor);
    },
    { immediate: true, deep: true }
);

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
    onOpen,
});
</script>

<style lang="less" scoped>
.listWrapper {
    display: flex;
    .itemWrapper {
        margin-left: 10px;
    }
}
</style>
